<template>
    <div>
        <Nav></Nav>
        <div v-if="goodsList.length > 0" class="main-box"
            style="display: flex;justify-content: center;flex-wrap: wrap;margin-top: 50px;">
            <div class="m-swiper-container" style="width: 1300px;">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="margin-left: 50px;">
                        <div class="goods-box " v-for="(good, index) in paginationList" v-if="index < pageSize"
                            :key="index">
                            <div class="goods">
                                <a @click="findGoodInfo(good.id)">
                                    <div class="img-box">
                                        <img :src="$baseUrl + good.cover.slice(2)">
                                    </div>
                                </a>
                                <a @click="findGoodInfo(good.id)">
                                    <p class="goodsname">{{ good.name }}</p>
                                </a>
                                <p class="goods-descript">{{ good.intro }}</p>
                                <p class="goods-spec">{{ good.spec }}</p>
                                <p class="goodsprices"><del><span class="yj">&yen;
                                            <span class="yjcont">{{ good.price }}</span></span></del></p>
                                <p class="addcart" :data-id="index"><i class="iconfont icon-gouwuche3">
                                    </i>加入购物车</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ep">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="goodsList.length">
                    </el-pagination>
                </div>

            </div>
        </div>
        <div v-else style="height: 65vh;">
            <el-empty >
            <template #description>
                <div style="color: orange;font-size: 24px;">没有相关商品</div>
            </template>
            <el-button type="warning" @click="$router.push('/')" >返回首页</el-button>
        </el-empty>
        </div>
    </div>
</template>

<script>
import Nav from '@/components/Nav.vue'
import { getGoodsListByTypeId } from '@/request/goods.js'
export default {
    name: 'GoodsList',
    components: {
        Nav
    },
    watch: {
        $route(to, from) {
            this.getData()
        }
    },
    data() {
        return {
            goodsList: [],
            paginationList: [],
            currentPage: 1,
            pageSize: 5
        };
    },

    mounted() {

        this.getData()
    },

    methods: {
        findGoodInfo(id) {
            this.$router.push({ path: '/goodsDetail', query: { id } })
        },
        handleCurrentChange(page) {
            this.currentPage = page
            this.paginationList = this.goodsList.slice(this.currentPage, this.currentPage * this.pageSize);
        },
        handleSizeChange(val) {
            this.pageSize = val
        },
        getData() {
            getGoodsListByTypeId(this.$route.query.typeId).then(res => {
                this.goodsList = res.data
                this.paginationList = this.goodsList
            })
        }
    },
};
</script>

<style scoped>
.m-swiper-container {
    display: flex;
    flex-direction: column;
}

.ep {
    margin: 30px 0;

}
</style>